import React, { PropTypes } from 'react';
import "antd-mobile/dist/antd-mobile.css"
import FloatMenu from 'antd-mobile/lib/float-menu';
import Button from 'antd-mobile/lib/button';
import NavBar from 'antd-mobile/lib/nav-bar';
import TweenOne from 'rc-tween-one';
import { Link } from 'react-router';
const Item = FloatMenu.Item;

class MobileNav extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      visible1: false,
      selected: ''
    };
  }
  onSelect(opt) {
    this.setState({
      visible: false,
      selected: opt.props.value
    });
  }
  handleVisibleChange(visible) {
    console.log(visible);
    this.setState({
       visible,
    });
  }

  render() {
    const { logo, menu1, menu2, menu3, menu4 } = this.props.dataSource.block1;
    const props = { ...this.props };
    delete props.dataSource;
    delete props.name;
    let overlay = [
      <Item key="/"><Link to="/">{menu1}</Link></Item>,
      <Item key="pages/products"><Link to="pages/products">{menu2}</Link></Item>,
      <Item key="pages/download"><Link to="pages/download">{menu3}</Link></Item>,
      <Item key="d">{menu4} </Item>
    ];

    return (<div>
      <NavBar iconName={false} style={{position: "fixed", top: "0px",zIndex: "100000", width: "100%"}}
        rightContent={<FloatMenu
          visible={this.state.visible}
          overlay={overlay}
          popupAlign={{
            offset: [5, 14],
          }}
          onVisibleChange={this.handleVisibleChange.bind(this)}
          onSelect={this.onSelect.bind(this)}
        >
          <a href="/" style={{ color: 'white' }}>
            菜单
          </a>
        </FloatMenu>}
      >
      <a href="/" style={{ color: 'white' }}>
      <TweenOne className={`${this.props.className}-logo`}
        animation={{ x: -30, delay: 100, type: 'from', ease: 'easeOutQuad' }}
      >
        <img height="33" src={logo} />
      </TweenOne>
      </a>
      </NavBar>
    </div>);
  }

}
export default MobileNav;
